import React, { Component } from 'react';
import { Spin,Row,Col,Icon,Skeleton,message,Popconfirm,Empty} from 'antd';
import Link  from 'next/link';
import Router from "next/router";
import { connect } from 'react-redux'
import * as API from '../../api/api'
import MyLayout from '../../components/layout';
import ArticleItem from '../../components/articleItem/index';
import { loadMore } from '../../utils/';
import config from '../../config'
import {storePage,storeHasMore,storeArticles,storeCategories} from '../../store/article/action'
import './index.less';


const LIMIT = config.articleLimit;

export default class Home extends Component{ 
    constructor(props) {
        super(props);
        this.state = {
            tabs:[{
                name:'我的文章',
                value:'me'
            },{
                name:'收藏',
                value:'collect'
            },{
                name:'点赞',
                value:'like'
            }],
            articles:[]
        };
    }

    static async getInitialProps ({req ,query,reduxStore}) {
        const { tab,userId } = query;
        let res = await API.getArticleListByUser({limit:LIMIT,page:1,tab,userId});
        let articles = res.data.data;
        return {tab,userId,articles}; 
    }
    componentWillReceiveProps(nextProps) {
        let {articles} = nextProps;
        this.setState({
            articles
        })
        console.log(nextProps)
        // const { pathname, query } = this.props.router
        // // verify props have changed to avoid an infinite loop
        // if (query.id !== prevProps.router.query.id) {
        //   // fetch data based on the new query
        // }
    }
    componentWillMount() {
        let {articles} = this.props;
        this.setState({
            articles
        })
    }
    filterArticle(id){
        let {articles} = this.state;
        this.setState({
            articles:articles.filter(item=>item._id!==id)
        })
    }
    toggleCollect = (id) => {
        API.toggleCollect(id).then(res => {
            if (res.data.code === 1) {
                this.filterArticle(id)
                message.success(res.data.message);
            } 
        })
    }
    toggleLike = (id) => {
        API.toggleLike(id).then(res => {
            if (res.data.code === 1) {
                this.filterArticle(id)
                message.success(res.data.message);
            } 
        })
    }
    handleRemove = (id) => {
        API.removeArticle(id).then((res)=>{
            if (res.data.code === 1) {
                message.success(res.data.message);
                this.filterArticle(id)
            } 
        })
    }
    getAction(id) {
        let {tab} = this.props;
        if(tab === 'me'||!tab||!tab.length){
            return [
                <Link href={`/write?id=${id}`}>
                    <a target="_blank">
                        编辑
                    </a>
                </Link>,
                <Popconfirm title="确认删除吗？" onConfirm={()=>{this.handleRemove(id)}} okText="确定" cancelText="取消">
                    <a>删除</a>
                </Popconfirm>,
            ]
        }
        if(tab === 'collect'){
            return [<a onClick={(e)=>{this.toggleCollect(id)}}>取消收藏</a>]
        }
        if(tab === 'like'){
            return [<a onClick={(e)=>{this.toggleLike(id)}}>取消点赞</a>]
        }
    }
    render(){
        let {tab,userId} = this.props;
        let {tabs,articles} = this.state;
        function checkTabActive(value){
            if(tab==undefined){
                tab = '';
            }
            return tab == value?'tabLink active':'tabLink'
        }

        return (
            <MyLayout showBg={true}>
                <div className="container">
                    <div className="view">
                        <Row gutter={16}>
                            <Col md={16} sm={16} xs={24}>
                                <div className="card personalWrapper">
                                    <div className="tabCard">
                                        <ul className="tabList">
                                            {
                                                tabs.map((item, index) => {
                                                    return (
                                                        <li className="tabItem" key={item.value}>
                                                            <Link as={`/u/${userId}/${item.value}`} href={`/personal?userId=${userId}&tab=${item.value}`}>
                                                                <a className={checkTabActive(item.value)}>{item.name}</a>
                                                            </Link>
                                                        </li>
                                                    )
                                                })
                                            }
                                        </ul>
                                    </div>
                                    <div className="post_list">
                                        {articles.length?(
                                            articles.map((item) => {
                                                return (
                                                    <ArticleItem item={item} key={item._id} actions={this.getAction(item._id)}></ArticleItem>
                                                )
                                            })
                                        ): <div style={{'padding':'20px 0'}}><Empty description="暂无数据哦~~"/> </div>}
                                    </div>
                                </div>
                            </Col>
                        </Row>    
                    </div>    
                </div>
            </MyLayout>
        )
    }
    

}


